<template>
  <div>
    <van-nav-bar title="销售合同" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="contract.contactNum"
          name="合同编号"
          label="合同编号"
          placeholder="合同编号"
          :rules="[{ required: false, message: '请填写合同编号' }]"
        />
        <!-- <van-field
          v-model="contract.status"
          name="状态"
          label="状态"
          placeholder="状态"
          :rules="[{ required: false, message: '请填写状态' }]"
        /> -->
        <van-cell is-link title="状态" @click="showStatus = true" />
        <van-action-sheet v-model="showStatus" :actions="actions" @select="onSelect" />
        <van-field
          v-model="contract.salesman"
          name="业务员"
          label="业务员"
          placeholder="业务员"
          :rules="[{ required: true, message: '请填写业务员' }]"
        />
        <van-field
          v-model="contract.customerName"
          name="客户名称"
          label="客户名称"
          placeholder="客户名称"
          :rules="[{ required: true, message: '请填写客户名称' }]"
        />

        <van-cell
          title="创建日期从"
          :value="contract.createTimeFrom"
          @click="showFrom = true"
          :rules="[{ required: false, message: '请填写创建日期从' }]"
        />
        <van-calendar v-model="showFrom" :show-confirm="false" @confirm="onConfirmFrom" />
        <van-cell
          title="创建日期至"
          :value="contract.createTimeTo"
          @click="showTo = true"
          :rules="[{ required: false, message: '请填写创建日期至' }]"
        />
        <van-calendar v-model="showTo" :show-confirm="false"  @confirm="onConfirmTo" />

      </van-cell-group>
      <div style="margin: 16px">
        <van-button size="large" type="primary" @click="queryContract">查询</van-button>
      </div>

    </van-form>
    <van-divider />
    <div style="margin: 16px">
      <van-button size="large" @click="showCreate()" type="primary">新建</van-button>
    </div>
  </div>
</template>

<script>
import { queryContract } from "@/api/contract";
import { Notify ,Toast } from "vant";
import{validateTime}from "@/utils/validate"
export default {
  data() {
    return {
      contract: {
        contactNum: "",
        status: "",
        salesman: "",
        customerName: "",
        failedReason: "",
        createTimeFrom: "",
        createTimeTo: "",
      },
      showFrom: false,
      showTo: false,
      showStatus: false,
      actions: [{ name: ''},{ name: '新建' }, { name: '上传中' }, { name: '成功' }, { name: '失败' }]
    };
  },

  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showStatus = false;
      Toast(item.name);
      this.contract.status = item.name;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirmFrom(date) {
      this.showFrom = false;

      this.contract.createTimeFrom = this.formatDate(date);
    },
    onConfirmTo(date) {
      this.showTo = false;

      this.contract.createTimeTo = this.formatDate(date);
    },
    onSubmit() {
        let err= validateTime(this.contract.createTimeFrom,this.contract.createTimeTo)
        if(err){
            Notify({message:err});
        }
    },
    queryContract(){
      if(this.contract.salesman==""||this.contract.customerName==""){
        Notify({type:"warning",message:"请输入必填项！"});
        return;
      }else{
        queryContract(this.contract).then((resp)=>{
        Notify({ type: 'success', message: "成功！" });
          this.$router.push({
            name:"contract",
            query:resp.data
          })
      })
      }
      
    },
    showCreate(){
      this.$router.push("contract")
    }
  },
};
</script>

<style>
</style>
